import React from 'react';
// import {
// 	Route,
// 	Link
// } from 'react-router-dom';
import './index.scss';
import { getBanner, getZiyuan } from '@/api/user';
import { Carousel } from 'antd';
// import ajax from '@/api/public';

class Resource extends React.Component{
	constructor (props) {
		super(props)
		this.state={
			 banner: '',
			 ziyuanList: [],
			 resourceList: [
			 ]
		}
	}
	componentDidMount () {
		getBanner({type: 2}).then(res => {
			this.setState({
				banner: res.data.list[0].image
			})
		})
		getZiyuan({use_info: 1}).then(res => {
			this.setState({
				resourceList: res.data.list
			})
		})
	}
	render() {
		return(
			<div>
				<div className='banner' style={{backgroundImage: `url(${this.state.banner})`}}></div>
				<div className='home-contain resource-group'>
					<div className='resource-title text-center'>全网络流量资源</div>
					<div className='resource-content'>
						{
							this.state.resourceList.map((item, index) => {
								return (
									<div className='resource-card' key={index}>
										<div className='resource-title text-center'>{item.title}</div>
										<div className='resource-content text-left'>
											{item.desc}
										</div>
										<div className='resource-iconlist'>
											{
												item.channel && item.channel.map((img, i) => {
													return (
														<img src={img.image} key={i}/>
													)
												})
											}
										</div>
										<div className='text-center'>
											<a href={`#/${item.source_info}`} className='resource-btn'>
												查看详情
											</a>
										</div>
									</div>
								)
							})
						}
					</div>
				</div>
			</div>
		)
	}
}
export default Resource;
